<template>
  <div id="app">
    <Loading :visible="screenLoading" />
    <template v-if="firstLoading">
      <transition name="router-fade" mode="out-in">
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
      </transition>
      <transition name="router-fade" mode="out-in">
        <router-view v-if="!$route.meta.keepAlive"></router-view>
      </transition>
    </template>
  </div>
</template>

<script>
import mixinCom from "@/mixin/mixinCom";
import Loading from "@/components/loading";
export default {
  name: "App",
  mixins: [mixinCom],
  components: { Loading },
  data() {
    return {
    };
  },
};
</script>

<style lang="less">
#app {
  .router-fade-enter-active,
  .router-fade-leave-active {
    transition: opacity 0.3s;
  }
  .router-fade-enter,
  .router-fade-leave-to {
    opacity: 0;
  }
}
</style>
